#include("/_function/layout/blank.vue")
#@layout(i18n['title'])
#define pageCenter()
<div id="root" class="login-wrapper">
<sign-in-page></sign-in-page>
</div>
<template type="text/x-template" id="tpl-sign-in-page">
    <div class="login-box">
        <div class="align-center">
            <div class="container">
                <div class="login-inner">
                    <div class="image"></div>
                    <div class="import-wrapper">
                        <div class="logo">
                            <a href="#(CONTEXT_PATH)">
                                <img src="#(CONTEXT_PATH)/resources/logo@64x64.png" class="img-responsive"/>
                            </a>
                        </div>
                        <h1 class="title">#(i18n['login.text_login'])</h1>
                        <div class="login-body">
                            <form @submit.prevent="submit" method="post">
                                <div class="form-group" :class="{'has-error' : errors.identity}">
                                    <label class="control-label">#(i18n['login.text_identity'])</label>
                                    <div class="input-group"><span><i class="fa fa-user"></i></span>
                                        <input v-model="signIn.identity"
                                               type="text"
                                               placeholder="#(i18n['login.text_identity'])"
                                               class="form-control"/>
                                    </div>
                                    <div class="text-danger" v-if="errors.identity">{{ errors.identity }}</div>
                                </div>
                                <div class="form-group" :class="{'has-error' : errors.password}">
                                    <label class="control-label">#(i18n['login.text_password'])</label>
                                    <div class="input-group"><span><i class="fa fa-lock"></i></span>
                                        <input v-model="signIn.password"
                                               type="password"
                                               placeholder="#(i18n['login.text_password'])"
                                               class="form-control"/>
                                    </div>
                                    <div class="text-danger" v-if="errors.password">{{ errors.password }}</div>
                                </div>
                                <div class="text-right">
                                    <button type="submit" class="btn btn-primary btn-block btn-lg"><i
                                            class="fa fa-key"></i> #(i18n['login.button_login'])
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
#end
#define jsCustom()
<script>
document.addEventListener("DOMContentLoaded", function () {
    Vue.component('sign-in-page', {
        template: document.getElementById('tpl-sign-in-page'),
        data: function () {
            return {
                signIn: {
                    identity: "admin",
                    password: "00000000"
                },
                errors: {}
            }
        },
        methods: {
            submit: function () {
                let self = this;
                this.errors = {}
                gateway.post('api/authentication/sign-in', this.signIn).then(function (response) {
                    var data = response.data;
                    self.errors = data.errors || {};
                    if (data.code === '00000') {
                        localStorage.setItem("jwt", data.type + " " + data.jwt)
                        Cookies.set("jwt", data.jwt)
                        location.href = "#(CONTEXT_PATH)/"
                    }
                }).catch(function (error) {

                });
            }
        }
    })
    new Vue({el: "#root"});
})
</script>
#end